<template>
  <tr>
    <td><input type="checkbox" :checked="selected" @change="$emit('toggle-selection', task.id)" /></td>
    <td>{{ task.title }}</td>
    <td>{{ task.description || '无描述' }}</td>
    <td>
      <select v-model="task.status" @change="updateStatus" class="form-select">
        <option value="pending">待处理</option>
        <option value="in_progress">进行中</option>
        <option value="completed">已完成</option>
        <option value="on_hold">暂停</option>
        <option value="cancelled">已取消</option>
      </select>
    </td>
    <td>
      <button class="btn btn-primary btn-sm me-2" @click="$emit('edit-task', task)">编辑</button>
      <button class="btn btn-danger btn-sm" @click="deleteTask">删除</button>
    </td>
  </tr>
</template>

<script>
import { updateTaskStatus, deleteTask } from '../api';

export default {
  name: 'TaskItem',
  props: {
    task: {
      type: Object,
      required: true,
    },
    selected: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    async updateStatus() {
      try {
        await updateTaskStatus(this.task.id, this.task.status);
        this.$emit('task-updated');
      } catch (error) {
        console.error('更新状态失败:', error);
      }
    },
    async deleteTask() {
      if (confirm('确定要删除这个任务吗？')) {
        try {
          await deleteTask(this.task.id);
          this.$emit('task-deleted');
        } catch (error) {
          console.error('删除任务失败:', error);
        }
      }
    },
  },
};
</script>